<template>
  <div id="homeusers">
    <el-card :body-style="{ padding: '20px' }" shadow="never">
      <div slot="header">用户管理
        <el-button type="primary" size="mini" @click="add" icon="el-icon-plus">添加</el-button>
      </div>
      <!-- card body -->
      <div style="margin: 20px 0px;">
        <el-input placeholder="请输入内容" class="input-with-select" v-model="fieldVal">
          <el-select v-model="field" slot="prepend" placeholder="请选择" style="width:100px;">
            <el-option label="用户名" value="username"></el-option>
            <el-option label="电话" value="phone"></el-option>
            <el-option label="邮箱" value="email"></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
      </div>
      <el-table :data="users" v-loading="loading" :border="true">
        <el-table-column prop="username" label="姓名"></el-table-column>
        <!-- <el-table-column prop="gender" label="性别" :formatter="function(row){return row.gender=='m'?'男':'女'}"></el-table-column> -->
        <el-table-column label="性别">
          <div slot-scope="{row}">
            <el-button size="mini" type="primary" v-if="row.gender=='m'" circle>男</el-button>
            <el-button size="mini" type="danger" v-else circle>女</el-button>
          </div>
        </el-table-column>
        <el-table-column prop="phone" label="手机">
          <div slot-scope="{row}">
            <el-button type="primary" size="mini" plain>{{row.phone}}</el-button>
          </div>
        </el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column label="操作">
          <div slot-scope="{row}">
            <el-button size="mini" type="primary" @click="edit(row.id)">编辑</el-button>
            <el-button size="mini" type="danger" @click="del(row.id)">删除</el-button>
          </div>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top:20px"
        background
        layout="prev, pager, next,sizes"
        :total="total"
        :page-size="pageSize"
        :current-page.sync="currentPage"
        @current-change="currentChange()"
        :page-sizes="[4,5,10,30]"
        @size-change="sizeChange"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [],
      pageSize: 4,
      currentPage: 1,
      total: 0,
      pageNum: 0,
      loading: false,
      field: "",
      fieldVal: ""
    };
  },
  created() {
    this.getusers();
  },
  methods: {
    edit(id) {
      this.$router.push({
        name: "useredit",
        params: {
          id
        }
      });
    },
    del(id) {
      this.$alert("确定删除吗？", "提示", {
        confirmButtonText: "确定"
      }).then(() => {
        this.axios
          .delete(`/users/del/${id}`)
          .then(() => {
            this.$message.success('删除成功！')
            this.getusers();
          }).catch(()=>{
            this.$message.error('删除失败！')
          })
         
      }).catch(()=>{});
    },
    add() {
      this.$router.push({
        name: "useradd"
      });
    },
    search() {
      this.getusers();
    },
    currentChange() {
      this.getusers();
    },
    sizeChange(size) {
      this.pageSize = size;
      this.getusers();
    },
    getusers() {
      this.loading = true;
      this.axios
        .get("/users", {
          params: {
            field: this.field,
            fieldVal: this.fieldVal,
            pageSize: this.pageSize,
            currentPage: this.currentPage
          }
        })
        .then(ret => {
          this.loading = false;
          let { error, data } = ret.data;
          this.users = data.rows;
          this.total = data.total;
          this.pageNum = Math.ceil(data.total / data.pageSize);
        })
        .catch(() => {});
    }
  }
};
</script>

<style>
</style>
